﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Droppable.aspx.cs" Inherits="DummyWebProject.Droppable" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        @import url(jquery-ui-1.7.1.custom.css);
    </style>
    <script src="jquery-1.3.2.min.js" />
    <script src="jquery-ui-1.7.1.custom.min.js" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <style type="text/css">
            #droppable
            {
                width: 150px;
                height: 150px;
                padding: 0.5em;
                float: left;
                margin: 10px;
            }
            #draggable, #draggable-nonvalid
            {
                width: 100px;
                height: 100px;
                padding: 0.5em;
                float: left;
                margin: 10px 10px 10px 0;
            }
        </style>
        <div class="demo">
            <div id="draggable-nonvalid" class="ui-widget-content">
                <p>
                    I'm draggable but can't be dropped</p>
            </div>
            <div id="draggable" class="ui-widget-content">
                <p>
                    Drag me to my target</p>
            </div>
            <div id="droppable" class="ui-widget-header">
                <p>
                    accept: '#draggable'</p>
            </div>
        </div>
        
        <jQuery:DraggableExtender TargetControlSelector="#draggable, #draggable-nonvalid" runat="server" />
        <jQuery:DroppableExtender TargetControlSelector="#droppable" AcceptSelector="#draggable" runat="server">
        </jQuery:DroppableExtender>
    </form>
</body>
</html>
